<template>
	<view class="time_reporting flex_col al_center" v-if="reportDetail">
		<view class="login_user_info flex_row al_center">
			<view class="flex_col  flex_1 al_center">
				<view class="flex_col head_item">
					<text>我的工种</text>
					<!-- <text>司机</text> -->
					<uni-notice-bar class="notice_bar" backgroundColor="#fff" color="#333" single="true" text="司机"></uni-notice-bar>

				</view>
			</view>
			<view class="head_line"></view>
			<view class="flex_row flex_1 al_center">
				<view class="flex_col flex_1 head_item al_center">
					<text>汇报时间</text>
					<!-- scrollable="true" :speed="10" -->
					<uni-notice-bar class="notice_bar" backgroundColor="#fff" color="#333" single="true" :text="reportTime"></uni-notice-bar>
				</view>
			</view>
			<view class="head_line"></view>
			<view class="flex_row flex_1 al_center">
				<view class="flex_col flex_1 head_item al_center">
					<text>位置</text>
					<uni-notice-bar class="notice_bar" show-icon="true" backgroundColor="#fff" color="#333" single="true" :text="address"></uni-notice-bar>
				</view>
			</view>
		</view>

		<!-- <view class="full_width pd_bt_20 pd_tp_30">
			<text class="status_txt">健康状况</text>
		</view>
		<text class="health_status">健康</text> -->

		<view class="report_list flex_col al_center" :style="{marginTop:'10rpx'}">
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name form_lable">车牌号</text>
				<text class="flex_1 report_input">{{reportDetail.plateNo}}</text>
			</view>
		</view>

		<block v-for="(item,ind) in workLoad" :key="ind">
			<view class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
				<text class="status_txt">工作量{{ind+1}}</text>

			</view>
			<view class="report_list flex_col al_center">
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">选择类别</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="categorys" range-key="text" @change="selectCate($event,item)">
							<text v-if="item.garbageTyep" class="selected_time">{{item.garbageTyep}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>

				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">数量</text>
					<view class="flex_row al_center">
						<text class="selected_time">{{item.count}}</text>
						<!-- <uni-number-box :min="0" disabled @change="changeNum($event,item)"></uni-number-box> -->
					</view>
				</view>

				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">单位</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="units" range-key="text" @change="selectUnit($event,item)">
							<text v-if="item.unit" class="selected_time">{{item.unit}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>
				<!-- {garbageTyep:null,count:null,unit:null} -->
			</view>
		</block>

		<block v-for="(item,indx) in energyConsumption" :key="indx+item">
			<view class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
				<text class="status_txt">能耗{{indx+1}}</text>
			</view>
			<view class="report_list flex_col al_center">
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable">加油量(L)</text>
					<input type="text" disabled v-model="item.volume" class="flex_1 report_input" placeholder="无数据" />
				</view>

				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable">加油量点</text>
					<input type="text" disabled v-model="item.address" class="flex_1 report_input" placeholder="无数据" />
				</view>

				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable">实时单价(元)</text>
					<input type="number" disabled v-model="item.price" class="flex_1 report_input" placeholder="无数据" />
				</view>

			</view>
		</block>


		<block v-for="(item,index) in watering" :key="index+'v'">
			<view class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
				<text class="status_txt">加水{{index+1}}</text>
			</view>
			<view class="report_list flex_col al_center">
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable">加水(L)</text>
					<input type="text" disabled v-model="item.volume" class="flex_1 report_input" placeholder="无数据" />
				</view>

				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable">加水点</text>
					<input type="text" disabled v-model="item.address" class="flex_1 report_input" placeholder="无数据" />
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable">单价(元)</text>
					<input type="number" disabled v-model="item.price" class="flex_1 report_input" placeholder="无数据" />
				</view>
			</view>
		</block>





		<view v-if="metering" class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
			<text class="status_txt">计量</text>
		</view>
		<view v-if="metering" class="report_list flex_col al_center">
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name form_lable">称重(吨)</text>
				<input type="text" disabled="" v-model="metering.totalWeight" class="flex_1 report_input" placeholder="无数据" />
				<!-- v-model="item.weigh" -->
			</view>

			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name form_lable">车重(吨)</text>
				<input type="text" disabled="" v-model="metering.vehicleWeight" class="flex_1 report_input" placeholder="无数据" />
				<!-- v-model="item.vehicleWeight" -->
			</view>

			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name form_lable">实重量(吨)</text>
				<input type="text" disabled="" v-model="metering.netWeight" class="flex_1 report_input" placeholder="无数据" />
				<!-- v-model="item.actualWeight" -->
			</view>

		</view>




		<block v-for="(item,index) in traveledkm" :key="index+'u'">
			<view class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
				<text class="status_txt">行驶公里数{{index+1}}</text>
				<!-- <text class="delete_status_txt" @tap="deletePublicTimes('traveledkm',index)">删除</text> -->
			</view>
			<view class="report_list flex_col al_center">
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable" :style="{width:'240rpx'}">起始公里数(km)</text>
					<input type="text" disabled v-model="startMileage" class="flex_1 report_input" placeholder="无数据" />
					<!-- item.startKm -->
				</view>

				<!-- <view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable">结束公里数</text>
					<input type="text" v-model="item.endKm" class="flex_1 report_input" placeholder="2000KM"/>
				</view> -->

			</view>
		</block>
		<!-- <view class="add_times mg_tp_20 flex_row al_center" @tap="addPublicTimes('traveledkm',{startKm:null,endKm:null})">
			<uni-icons type="plusempty" class="mg_lt_30" color="#345AD4"></uni-icons>
			<text class="add_times_txt">添加行驶公里数</text>
		</view> -->



		<block v-for="(item,ind) in securitys" :key="ind+'a'">
			<view class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
				<text class="status_txt">安全{{ind+1}}</text>
			</view>
			<view class="report_list flex_col al_center">
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">交通违规</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="traffRules" range-key="text" @change="selecttraffic($event,item)">
							<text v-if="item.violationName" class="selected_time">{{item.violationName}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">扣分</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="numList2" range-key="num" @change="changeScore($event,item)">
							<text v-if="item.violationDeduction" class="selected_time">{{item.violationDeduction}}分</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">数量</text>
					<view class="flex_row al_center">
						
						<text class="selected_time">{{item.violationCount}}</text>
						<!-- <uni-number-box :min="0" disabled @change="changeTimes($event,item)"></uni-number-box> -->
					</view>
				</view>

			</view>
		</block>


		<block v-for="(item,ind) in qualitys" :key="ind+'b'">
			<view class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
				<text class="status_txt">质量{{ind+1}}</text>
			</view>
			<view class="report_list flex_col al_center">
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">垃圾满漏</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="thereany" range-key="text" @change="selectAny($event,item,'garbageLeak')">
							<text v-if="item.garbageLeak" class="selected_time">{{item.garbageLeak}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>

				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">垃圾暴露</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="thereany" range-key="text" @change="selectAny($event,item,'garbageExpose')">
							<text v-if="item.garbageExpose" class="selected_time">{{item.garbageExpose}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>

				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">跑冒滴漏</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="thereany" range-key="text" @change="selectAny($event,item,'garbageDroping')">
							<text v-if="item.garbageDroping" class="selected_time">{{item.garbageDroping}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>


				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">日清日运</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="thereany" range-key="text" @change="selectAny($event,item,'dailyDelivery')">
							<text v-if="item.dailyDelivery" class="selected_time">{{item.dailyDelivery}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>

				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">车身洁净</text>
					<view class="flex_row al_center">
						<picker mode="selector" disabled :range="thereany" range-key="text" @change="selectAny($event,item,'vehicleClean')">
							<text v-if="item.vehicleClean" class="selected_time">{{item.vehicleClean}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
					</view>
				</view>
				<view class="common_width flex_col" :style="{'backgroundColor':'#fff'}">
					<text class="report_name">说明</text>
					<textarea :maxlength="20" disabled v-model="item.reason" placeholder="无数据" class="mg_tp_20 explain_text"></textarea>
				</view>

			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				healthStatus: '',
				plateNumber: '粤Y9D380',
				categorys: [{
					text: '果皮箱'
				}, {
					text: '120L桶'
				}, {
					text: '240L桶'
				}, {
					text: '660L桶'
				}, {
					text: '3m³箱'
				}, {
					text: '25m³箱'
				}, {
					text: '推车'
				}, {
					text: '行驶公里数'
				}],
				address: '',
				numList2: [{
					num: 1
				}, {
					num: 2
				}, {
					num: 3
				}, {
					num: 4
				}, {
					num: 5
				}, {
					num: 6
				}, {
					num: 7
				}, {
					num: 8
				}, {
					num: 9
				}, {
					num: 10
				}, {
					num: 11
				}, {
					num: 12
				}],

				workLoad: [{
					garbageTyep: null,
					count: null,
					unit: null
				}],
				energyConsumption: [{
					volume: null,
					price: '',
					address: ''
				}],
				watering: [{
					volume: null,
					price: '',
					address: ''
				}],
				metering: {
					totalWeight: null,
					vehicleWeight: null,
					netWeight: null
				},
				traveledkm: [{
					startKm: null,
					endKm: null
				}],
				securitys: [{
					violationName: null,
					violationDeduction: null,
					violationCount: null
				}],
				traffRules: [{
					text: '闯红灯'
				}, {
					text: '超速'
				}, {
					text: '逆向行驶'
				}, {
					text: '违停'
				}, {
					text: '抢人行道'
				}],
				qualitys: [{
					garbageLeak: null,
					garbageExpose: null,
					garbageDroping: null,
					dailyDelivery: null,
					vehicleClean: null,
					reason: null
				}],
				thereany: [{
					text: '有'
				}, {
					text: '没有'
				}],
				units: [{
					text: '升(L)'
				}, {
					text: '千米(km)'
				}, {
					text: '吨(t)'
				}],
				startMileage: null,
				lng: null,
				lat: null
			}
		},
		computed: {
			nowTime: function() {
				return this.$utils.format(new Date(), "yyyy-MM-dd HH:mm")
			},
			sum: function() {
				let sum = 0
				this.workLoad.forEach(item => {
					sum = parseInt(sum) + parseInt(item.count)
				})
				return sum * 100
			},
			reportTime: function() {
				if (this.reportDetail) {
					return this.$utils.format(new Date(this.reportDetail.createTime), 'yyyy-MM-dd hh:mm')
				}
			}
		},
		props: {
			reportDetail: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		watch: {
			reportDetail: function(newVal, oldVal) {
				this.workLoad = newVal.workload;
				if(newVal.liteCount!=null){
					this.metering = newVal.liteCount;
				}
				this.energyConsumption = newVal.refuels;
				//把加油金额 分转元
				if (this.energyConsumption && this.energyConsumption.length > 0) {
					this.energyConsumption.forEach(item => {
						this.$set(item, 'price', item.price / 100)
					})
				}
				this.watering = newVal.waters;
				//把加水金额 分转元
				if (this.watering && this.watering.length > 0) {

					this.watering.forEach(item => {
						this.$set(item, 'price', item.price / 100)
					})
				}
				this.qualitys = newVal.workquality;
				this.securitys = newVal.securitys;
				this.startMileage = newVal.startMileage
			}
		},
		onLoad() {
			let _this = this
			uni.getLocation({
				geocode: true,
				success(res) {
					console.log(res)
					_this.lng = res.longitude
					_this.lat = res.latitude
					_this.address = res.address.poiName
				}
			})
		},
		methods: {
			changeScore(e, item) {
				item.violationDeduction = this.numList2[e.detail.value].num
			},
			selectAny(e, itemx, name) {
				itemx[name] = this.thereany[e.detail.value].text
			},
			changeTimes(e, item) {
				item.violationCount = e
			},
			selecttraffic(e, item) {
				item.violationName = this.traffRules[e.detail.value].text
			},
			addPublicTimes(name, obj) {
				this[name].push(obj)
			},
			deletePublicTimes(name, index) {
				this.$delete(this[name], index)
			},
			selectCate(e, item) {
				item.garbageTyep = this.categorys[e.detail.value].text
			},
			selectUnit(e, item) {
				item.unit = this.units[e.detail.value].text
			},
			back() {
				this.$utils.navBack()
			},
			changeNum(e, item) {
				item.count = e
			},
			decide(name, title) {
				if (this[name] != null) {
					let x = 0
					for (let i = 0; i < this[name].length; i++) {
						x++;
						for (let key in this[name][i]) {
							if (!this[name][i][key]) {
								uni.showToast({
									icon: 'none',
									title: title + (i + 1) + '请填写完整或删除该项'
								})
								return false;
								break;
							}
						}
					}
					if (x === this[name].length) {
						return true
					}
				} else {
					return true
				}

			},
			deleteWorkLoad(index) {
				this.$delete(this.workLoad, index)
			},
			addWorkLoad() {
				this.workLoad.push({
					garbageTyep: null,
					count: null,
					unit: null
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/css/main.css";

	.time_reporting {
		display: flex;
		width: 750rpx;
		flex: 1;
		background-color: #F6F6F6;

		.health_status {
			width: 750rpx;
			height: 170rpx;
			background: #fff;
			padding-left: 40rpx;
			padding-top: 30rpx;
			font-size: 32rpx;
			box-sizing: border-box;
		}

		.explain_text {
			font-size: 32rpx;
			height: 120rpx;
		}

		.add_times {
			width: 750rpx;
			height: 120rpx;
			background-color: #fff;

			.add_times_txt {
				font-size: 32rpx;
				color: #345AD4;
			}
		}

		.selected_time {
			font-size: 32rpx;
			color: #333;
		}

		.status_txt {
			margin-left: 40rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #909090;
		}

		.delete_status_txt {
			margin-right: 40rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FF5454;
		}

		.login_user_info {
			width: 750rpx;
			height: 130rpx;
			background-color: #fff;

			.head_line {
				width: 1px;
				height: 44rpx;
				background-color: #D7D7D7;
			}

			.head_item {
				text:nth-child(1) {
					font-size: 30rpx;
					color: #868686;
				}

				text:nth-child(2) {
					padding-top: 10rpx;
					text-align: center;
					font-size: 26rpx;
					color: #454545;
				}
			}

			.top_txt {
				font-size: 30rpx;
				font-weight: 500;
				color: #868686;
			}

			.notice_bar {
				width: 100%;
				padding: 10rpx;
				text-align: center;
				margin: 0 auto;
			}
		}


		.report_list {
			width: 750rpx;
			background-color: #fff;

			.report_item {
				width: 690rpx;
				height: 120rpx;
				border-bottom: 1px solid #E8E8E8;

				.report_name {
					font-size: 32rpx;
					color: #2E2D2D;
					font-weight: 500;
				}

				.report_value {
					font-size: 32rpx;
					color: #909090;
					font-weight: 500;
				}

				.form_lable {
					width: 200rpx;
				}

				.report_input {
					font-size: 32rpx;
				}
			}

		}


		.two_btn {
			width: 750rpx;
			height: 130rpx;
			margin-top: 40rpx;
			text-align: center;
			background-color: #fff;
		}

		.draft_btn {
			margin-left: 34rpx;
			margin-top: 20rpx;
			width: 200rpx;
			height: 96rpx;
			background: #26AE6C;
			border-radius: 10rpx;

		}

		.draft_btn text {
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
		}

		.submit_btn {
			width: 466rpx;
			height: 76rpx;
			background: #345AD4;
			border-radius: 10rpx;
			margin: 0 auto;
		}

		.submit_btn text {
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
		}
	}
</style>
